<template>
  <div class="login-page-bg">
    <BaseHeader :navs="navs" :activeNav="activeNav" @nav-change="activeNav = $event" />
    <div class="login-main">
      <div class="login-left">
        <div class="slogan">
          <div>旋翼翱翔探索空域可能，</div>
          <div>点燃你的科技创造力！</div>
        </div>
        <div class="drone-img-box">
          <img src="@/assets/index/loginImg.png" alt="无人机" class="drone-img" />
        </div>
      </div>
      <div class="login-right">
        <div class="login-card">
          <div class="login-tabs">
            <div v-for="(tab, idx) in loginTabs" :key="tab" :class="['login-tab', { active: loginType === idx }]"
              @click="loginType = idx">
              {{ tab }}
            </div>
          </div>
          <transition name="fade-transform" mode="out-in">
            <div :key="loginType" style="width: 100%">
              <!-- 微信扫码登录 -->
              <div v-if="loginType === 0" class="wechat-login-box">
                <img src="@/assets/index/code.png" alt="微信二维码" class="wechat-qrcode" />
                <div class="wechat-tip">微信扫码一键登录注册</div>
                <div class="wechat-desc">
                  <div class="wechat-tip">扫码即表示同意 </div>

                  《希赛服务协议》<div class="wechat-tip">和</div>《隐私协议》
                </div>
                <div class="wechat-qrcode-box">
                  <img src="@/assets/index/wx.png" />
                  <img src="@/assets/index/erwei.png" />
                </div>
              </div>
              <!-- 验证码登录 -->
              <div v-else-if="loginType === 1" class="form-login-box">
                <el-form :model="form" :rules="rules" ref="formRef" label-width="0">
                  <el-form-item prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11">
                      <!-- <template #prefix>
                        <img
                          src="@/assets/index/phone.png"
                          class="input-icon"
                        />
                      </template> -->
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="code">
                    <el-input v-model="form.code" placeholder="请输入验证码" maxlength="6">
                      <!-- <template #prefix>
                        <img
                          src="@/assets/index/email.png"
                          class="input-icon"
                        />
                      </template> -->
                      <template #suffix>
                        <el-button type="text" class="code-btn" :disabled="countdown > 0" @click="sendCode">
                          {{ countdown > 0 ? countdown + "s" : "获取验证码" }}
                        </el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" class="login-btn" @click="handleLogin('code')">登录</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <!-- 密码登录 -->
              <div v-else class="form-login-box">
                <el-form :model="form" :rules="rules" ref="formRef" label-width="0">
                  <el-form-item prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11">
                      <!-- <template #prefix>
                        <img
                          src="@/assets/index/phone.png"
                          class="input-icon"
                        />
                      </template> -->
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input v-model="form.password" placeholder="请输入密码" show-password>
                      <!-- <template #prefix>
                        <img
                          src="@/assets/index/email.png"
                          class="input-icon"
                        />
                      </template> -->
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" class="login-btn" @click="handleLogin('password')">登录</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <BaseFooter />
  </div>
</template>
<script>
import BaseHeader from "@/components/baseHeader.vue";
import BaseFooter from "@/components/baseFooter.vue";
export default {
  name: "login",
  components: { BaseHeader, BaseFooter },
  data() {
    return {
      navs: ["首页", "新闻", "题库", "资料", "产教课程"],
      activeNav: "登录",
      loginTabs: ["微信登录", "验证码登录", "密码登录"],
      loginType: 0,
      form: {
        phone: "",
        code: "",
        password: "",
      },
      countdown: 0,
      timer: null,
      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    sendCode() {
      if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
        this.$message.error("请输入正确的手机号");
        return;
      }
      this.countdown = 60;
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(this.timer);
        }
      }, 1000);
      this.$message.success("验证码已发送");
    },
    handleLogin(type) {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$message.success("登录成功（模拟）");
        }
      });
    },
  },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
  },
};
</script>
<style scoped lang="scss">
@import "@/assets/style/index.scss";
@import "@/assets/style/transition.scss";

.login-page-bg {
  min-height: 100vh;
  // background: linear-gradient(180deg, #b2c6e5 0%, #e6eaf1 100%);
  background: url("@/assets/index/loginbg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.login-main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
  flex: 1;
  margin-top: 40px;
  margin-bottom: 40px;
}

.login-left {
  width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 60px;
}

.slogan {
  font-weight: 600;
  font-size: 32px;
  color: #fff;
  text-align: center;
  margin-bottom: 24px;
  text-shadow: 0 2px 8px rgba(52, 130, 244, 0.18);
}

.drone-img-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drone-img {
  width: 492px;
  height: auto;
}

.login-right {
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 32px 0 rgba(52, 130, 244, 0.1);
  padding: 36px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #e9edff 0%, #f2f6f8 100%);
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.11);
  border-radius: 12px;
}

.login-tabs {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 32px;
}

.login-tab {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #b2c6e5;
  cursor: pointer;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.login-tab.active {
  color: #3482f4;
  border-bottom: 2px solid #3482f4;
  font-weight: 700;
}

.wechat-login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wechat-qrcode {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  background: #f5f7fa;
  margin-bottom: 18px;
  border: 1px solid #e6eaf1;
}

.wechat-tip {
  font-size: 12px;
  color: #41464f;

  margin-bottom: 6px;
}

.wechat-desc {
  font-size: 12px;
  color: #1664ff;
  display: flex;


}

.form-login-box {
  width: 100%;
}

.input-icon {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}

.code-btn {
  color: #3482f4;
  font-size: 14px;
  padding: 0 8px;
}

.login-btn {
  width: 100%;
  height: 44px;
  font-size: 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, #3482f4 0%, #1664ff 100%);
  border: none;
}

.wechat-qrcode-box {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  border-top: 1px dotted #e9e6f2;
  padding-top: 23px;

  img {
    width: 34px;
  }
}

@media (max-width: 900px) {
  .login-main {
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .login-left {
    margin-right: 0;
    margin-bottom: 32px;
  }

  .login-right {
    width: 100%;
  }
}
</style>
